<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="org.slf4j.*" %>
<%@ page import="cn.fnst.facecomp.dao.CommonDao" %>
<%@ page import="java.util.*" %>
<%@ page import="cn.fnst.facecomp.utils.*" %>
<%@ page import="cn.fnst.facecomp.*" %>
<%@ page import="cn.fnst.facecomp.service.*" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> 
<META HTTP-EQUIV="Expires" CONTENT="0"> 
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui">
<title>人脸识别</title>
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<link href="css/base.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	.upload_photo{text-align: center;font-size: 1rem;}
	.photo{width: 8rem;margin: 0 auto 0 auto;border-radius: .4rem;border: 1px solid #E8E8E8;overflow: hidden;}
	.upload_action_btn{padding: .4rem 1rem;background: #418BC3;font-size: 1rem;color: #FFF;border: none;border-radius: .3rem}
	.upload_action_btn:hover{background: #118de4}
	.input_id p{margin: 1rem 0 .5rem 0;}
	.input_id input,.btn{-webkit-box-sizing:border-box;width: 90%;padding:.7rem;border:1px solid #E8E8E8;}
	.verification{bottom: 0;width: 100%;padding: 1rem 0;}
	.btn{background: #FF8D21;border-radius: .3rem;border: none;color: #FFF;font-size: 1.4rem;padding: .3em}
	.top {
		padding-top: 10px;
		color: #999999;
	}
	.footer {
		width: 100%;
	}
	.msg {
		margin-top: 5px;
		color:#FF0000;
	}
	.info {
		margin: 10px 0 0 0;
	}
	.info_line1{
		margin: 5px 5px 5px 5px;
		text-indent: 20px;
		letter-spacing: 0.3pt;
		text-align: left;
	}
	.info_line3{
		margin: 5px 5px 5px 5px;
		text-align: left;
		padding-left: 20px;
	}
	.info_line4{
		margin: 5px 5px 10px 5px;
		text-align: left;
		padding-left: 20px;
	}
	
	.id_show_default{
		color:#ccc";
	}
	
	.id_show_userinput{
		color: red;
	}
	
	.reUpload{
		margin: 0 auto;
	}
	
	.uploadLink{
		margin: 0 auto;
	}
	
	.info1{
		margin: 3px 0 0 0;
		color: #73BE5A;
		height: 1rem;
	}
</style>
<%
	Logger log = LoggerFactory.getLogger(getClass());

	String error = (String) request.getAttribute("error");
	String idNumber = request.getParameter("idNumber");
	String idCard = (String) request.getAttribute("idCard");
	if (idCard == null) {
		idCard = request.getParameter("idCard");
	}
	log.info("idCard: " + idCard);
	log.info("idIumber: " + idNumber);
	if (idCard == null) {
		if (idNumber == null || "".equals(idNumber)) {
			idCard = "";
		} else {
			idCard = Encypt.decrypt(idNumber);
			log.info("idCard["+idCard+"]");
		}
	}
	
	String userCard = idCard;
	try{
		Object userCardObj = request.getAttribute("userCard");		
		if(userCardObj != null){
			userCard = (String)userCardObj;
		}
		log.info("userCard: " + userCard);
	}catch(Exception e){
		log.error(e.getMessage(), e);
	}
	
	
	//测试环境
	//String uploadUrlImg = "#uploadImgByClient?imgNum=1&imgSize=200&serverurl=http%3A%2F%2F10.101.2.85%3A8580%2Fface%2FUploadImg%3FidCard%3D"+idCard;
	//发布环境	
	String uploadUrlImg = "#uploadImgByClient?imgNum=1&serverurl=http://58.213.141.220:8080/face/UploadImg";
	
	String pic1 = (String) request.getAttribute("pic1");
	String picSrc = "theme/images/upload_photo.png";
	if (pic1 == null || "".equals(pic1) || "null".equals(pic1)) {
		pic1 = "";
	} else {
		picSrc = "/face/upload/" + pic1;
	}
	
	long usedTimes = 0;
	try{
		usedTimes = CommonDao.getInstance().getUsedTimes(userCard, Utils.getDateString(new Date()));
	}catch(Exception e){
		log.error(e.getMessage());
	}
	
	//统计访问次数
	TotalNumberService tns = TotalNumberService.getInstance();
	tns.addRequestNumber();
%>
<script type="text/javascript">
function uploadImgOver(returns) {
	if(returns == "tooMuch"){
		showMsg("使用次数过多,请改天再试");
		return;
	}
	
	if (returns == "imgIsNull"){
		showMsg("上传图片内容为空。");
		return;
	}
	if (returns == "uploadsErr"){
		showMsg("上传图片失败。");
		return;
	}
	if (returns.indexOf("ok") == 0) {
		var imgsrc = returns.substr(3);
		document.getElementById("img_1").src= "/face/upload/" + imgsrc;
		document.getElementById("pic_1").value = imgsrc;
		
		//hiddenInfo();
		$(".uploadLink").hide();
		showPic();
	}
	hiddenMsg();
}

function checkData() {
	var pic = document.getElementById("pic_1").value;
	var idCard = document.getElementById("idCard").value;
	if (!pic || pic == "") {
		showMsg("请先上传照片。");
		return false;
	} else if (!idCard || idCard == ""){
		showMsg("请输入身份证号码。");
		return false;
	} else {
		return true;
	}
}

function showMsg(msg) {
	document.getElementById("msg").innerHTML = msg;
}

function hiddenMsg() {
	document.getElementById("msg").innerHTML = "";
}

function showPic() {
	$(".photo").show();
}

function hiddenPic() {
	$(".photo").hide();
}

function hiddenInfo(){
	//$(".info").hide();
}

function identityOnfocus(obj){
	if(obj.value=='请输入身份证'){
		obj.value='';
		$("#idCard").css({color: "#000000"});
	}
}

function identityOnblur(obj){
	if(obj.value==''){
		obj.value='请输入身份证';
		$("#idCard").css({color: "#CCCCCC"});
	}
}

function reUploadImg(){
	hiddenPic();
	$(".uploadLink").show();
	//$(".info").show();
}

function reSetPic(p){
	
	document.getElementById("img_1").src= "/face/upload/" + p;
	document.getElementById("pic_1").value = p;

	$(".uploadLink").hide();
	showPic();
}

</script>
</head>
<body>
<div class="upload_photo">
	<div class="info">
		<p class="info_line1">"互联网+"时代，人脸识别技术将广泛应用于身份识别、金融支付等领域。欢迎大家参与这项高科技体验测试，输入比对人的身份证号码并上传一张人脸照片，系统将与后台数据库进行比对并得出相似度。
		</p>
		<p class="info_line3">* 1、目前仅限南京市市民卡用户。</p>
		<p class="info_line4">* 2、测试期每天每人可以使用<lable class="usedTimes"></lable>次。</p>
	</div>
	<div class="photo">
		<a href="<%=uploadUrlImg %>">
			<img id="img_1" width="100%" src="<%=picSrc %>">
		</a>
	</div>
	<a class="uploadLink" href="<%=uploadUrlImg %>">
		<img src="theme/images/upload_photo2.png"/><br/>
		<label class="info1">点击笑脸图标,上传靓照</label>
	</a>
	<form action="ImgContrast" method="get" onsubmit="return checkData();">
	<input type="hidden" id="pic_1" name="pic1" value="<%=pic1 %>" />
	<input type="hidden" id="idNumber" name="idNumber" value="<%=idNumber %>" />
	<p id="msg" class="msg"></p>
	<label class="input_id">
	<input type="text" id="idCard" name="idCard" value="<%=idCard %>" onfocus="identityOnfocus(this)" onblur="identityOnblur(this)" />
	<input type="hidden" id="userCard" name="userCard" value="<%=userCard %>" />
	</label>

	<div class="verification"><input type="submit" class="btn"  value="开始识别(<%= usedTimes %>/<%= Constant.MAX_TIMES%>) "/></div>
	</form>
	<div class="footer"><img width="60%"  src="theme/images/footer.png"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
	hiddenPic();
	$(".uploadLink").show();

	<% if (error != null) {%>
		showMsg("<%= error%>");
		reSetPic("<%= pic1%>");
	<% }%>
	
	showUsedTimes();
});

function showUsedTimes(){
	var number = <%= usedTimes %>;
	var maxNumber = <%= Constant.MAX_TIMES%>
	var text = '(' + number+ '/' + maxNumber + ')';
	$(".usedTimes").html(text);

}
</script>
</body>
</html>
